<template>
    <div class="Field">
        <p style="font-size: 14px; font-weight: 700; color: rgba(162, 182, 255, 1);">
            场地使用
        </p>
    </div>
    <div ref="chart" class="Field_Bottom">

    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';

const chart = ref(null);
let myChart = null;

const Field = () => {

    myChart = echarts.init(chart.value);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
    const option = {
        xAxis: {
            type: 'category',
            data: ['图书馆', '体育馆', '实验楼', '超市', '会议楼'],
            axisLine: {
                show: false
            },
            axisLabel: {
                color: '#fff',  // X轴标签颜色
            },
            axisTick: {
                show: false
            }
        },

        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff',  // Y轴线条颜色
                },
            },
            axisLabel: {
                color: '#fff',  // Y轴标签颜色
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)',  // 分隔线颜色
                },
            },
        },

        grid: {
            left: '3%',
            right: '3%',
            bottom: '3%',
            top: '10%',
            containLabel: true,  // 保证轴标签不溢出容器
        },

        series: [{
            type: 'bar',
            data: [500, 300, 400, 600, 200],  // 示例数据
            barWidth: '40%',  // 柱状宽度
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(255, 0, 255, 0.8)' },
                    { offset: 1, color: 'rgba(0, 102, 204, 0.8)' },
                ]),
                borderRadius: [10, 10, 0, 0],  // 顶部圆角
                shadowBlur: 100,  // 阴影模糊半径
                shadowColor: 'rgba(0, 0, 0, 0.5)',  // 阴影颜色
                shadowOffsetX: 0,  // 水平偏移量
                shadowOffsetY: 5,  // 垂直偏移量
            },

        }],
    };

    // 应用配置项
    myChart.setOption(option);
}

onMounted(() => {
    Field();
})

onBeforeUnmount(() => {
    if (myChart) {
        myChart.dispose();  // 销毁图表实例，清理资源
    }
})


</script>

<style lang="scss" scoped>
.Field {
    position: fixed;
    left: 70px;
    top: 510px;
    width: 330px;
    height: 30px;
    opacity: 1;
    background-image: url('../../assets/Path2.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 30px;

    p {
        margin-left: 14px;
    }
}

.Field_Bottom {
    position: fixed;
    left: 70px;
    top: 550px;
    background: #0C1D5F;
    width: 330px;
    height: 150px;
    opacity: 1;
}
</style>